import React from 'react'
import '../assets/styles'
import './jquery-vendor'
import ztree from 'ztree'
// import 'ztree/css/zTreeStyle/zTreeStyle.css';
import '../assets/styles/ztreeIdea.scss'


class ZTreeReact extends React.Component {

    constructor(props) {
        super(props);
        let id = this.props.id || new Date().getTime();
        this.state = {
            id: id,
            zTreeObj: null
        };
    }

    getZTreeObj = () => {
        return this.state.zTreeObj;
    }

    initZTree = (id, data) => {
        let that = this;
        var zTree = {
            that: this,
            mTree: null,
            zTreeEvent: {
                onRightClick: function (e, treeId, treeNode) {
                    $.fn.zTree.getZTreeObj(treeId).selectNode(treeNode);
                    throw new Error('_为了弹出右键菜单而故意为之');
                },
                onDblClick: function (e, treeId, treeNode) {
                    that.props.onDblClick && that.props.onDblClick(e, treeId, treeNode)
                },
                onMouseDown: function (e, treeId, treeNode) {
                },
                addDiyDom: function (treeId, treeNode) {
                    let spaceWidth = 15;
                    let switchObj = $("#" + treeNode.tId + "_switch"),
                        icoObj = $("#" + treeNode.tId + "_ico");
                    switchObj.remove();
                    icoObj.before(switchObj);
                    let spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
                    switchObj.before(spaceStr);
                    let $a = switchObj.parent();
                    if (treeNode.title) {
                        $a.attr('title', treeNode.title);
                        $a.addClass('showTip');
                    }
                    $a.parents('li').eq(0).attr('data-id', treeNode._id)
                    if (treeNode.color) $a.css('color', treeNode.color);
                },
                beforeClick: function (treeId, treeNode) {
                    return true;
                },
            },
            setting: {
                view: {
                    showLine: false,
                    showIcon: true,
                    selectedMulti: false,
                    dblClickExpand: true,
                    addDiyDom: (treeId, treeNode) => zTree.zTreeEvent.addDiyDom(treeId, treeNode)
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: '_id',
                    }
                },
                callback: {
                    beforeClick: (e, treeId, treeNode) => zTree.zTreeEvent.beforeClick(e, treeId, treeNode),
                    onMouseDown: (e, treeId, treeNode) => zTree.zTreeEvent.onMouseDown(e, treeId, treeNode),
                    onDblClick: (e, treeId, treeNode) => zTree.zTreeEvent.onDblClick(e, treeId, treeNode),
                    onRightClick: (e, treeId, treeNode) => zTree.zTreeEvent.onRightClick(e, treeId, treeNode)
                }
            },
            init: function (target, options) {

            }
        };
        let tId = `${id}Ztree`;
        let $tableTree = $(`#${tId}`);
        let treeObj = $.fn.zTree.init($tableTree, zTree.setting, data);
        $tableTree.addClass("showIcon");
        let curMenu = treeObj.getNodes()[0];
        treeObj.expandNode(curMenu);
        this.setState({
            zTreeObj: treeObj
        })
    };

    componentDidMount() {
        this.initZTree(this.state.id, this.props.treeData);
    }

    render() {
        let {id} = this.props
        return (
            <div className='ztree-warp'>
                {/* 类名ztree一定要加上，不然也是没有样式 */}
                <ul id={`${id}Ztree`} className="ztree"></ul>
            </div>
        );
    }
}

export default ZTreeReact
